<script setup lang="ts">
import { useRouter } from 'vue-router'
import { EditFilled } from '@ant-design/icons-vue'
import { useUserStore } from '@/common/stores/modules/users-store'
import { message } from 'ant-design-vue'

const userstore = useUserStore()
const router = useRouter()


// 判断是否登录
const publishcontent = () => {
  if (userstore.userInfo) {
    router.push('/drafts')
  } else {
    router.push('/login')
    message.warning('请先登录！')
  }
}
</script>

<template>
  <!-- 内容 -->
  <div class="content">
    <!-- 左侧 -->
    <div class="content-left">
      <educ-technical-article />
    </div>
    <!-- 右侧  -->
    <div class="content-right">
      <!-- 发布内容 -->
      <a-button
        class="content-right-btn"
        type="primary"
        shape="round"
        :block="true"
        @click="publishcontent"
      >
        <EditFilled />
        发布内容
      </a-button>
      <!-- 本周热榜 -->
      <educ-dynamic-hot-list />
      <!-- 热门话题 -->
      <educ-dynamic-hot-topic />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.content {
  display: flex;

  .no-bl {
    display: none;
  }

  &-left {
    width: 70%;
    padding: 1.875rem;
    margin: 0 2.5rem;
    background-color: $educ-color-white;
    border-radius: 0.3125rem;
  }

  &-right {
    width: 30%;

    &-btn {
      width: 100%;
      height: 3.125rem;
      margin-bottom: 1.25rem;
      background-color: $educ-color-primary;
      border: none;
      border-radius: 0.5rem;
      outline: none;
    }
  }
}

@media screen and (width <= 62rem) {
  .content {
    display: block;

    &-left {
      width: 90%;
      margin: 0 auto;
    }

    &-right {
      display: block !important;
      width: 90%;
      margin: 1.25rem auto;
    }
  }
}
</style>
